/*
 * @Description: useState和useRef的区别
 * @Author: Zhanghan
 * @Date: 2025-03-26 10:10:59
 * @LastEditTime: 2025-03-28 20:08:39
 * @LastEditors: Zhanghan
 */
import { useState, useRef } from "react";
import { Button } from "antd";
const StateAndRef = () => {

  /*
  count的值的更新会导致内容重新渲染
  ref的值不会导致内容重新渲染 
  */ 
  const [count, setCount] = useState(0);
  const myrefcount = useRef(0);

  function getRef() {
    console.log("🚀 ~ getRef ~ myrefcount.current:", myrefcount.current);
  }

  function getState() {
    console.log("🚀 ~ getState ~ count:", count);
  }

  function setState() {
    setCount(count + 1);
  }

  function setRef() {
    myrefcount.current++;
  }

  return (
    <>
      <div>
        <h1 className="text-center">useState和useRef的区别</h1>
        <Button type="primary" onClick={getState}>
          使用state
        </Button>
        <Button type="primary" onClick={setState}>
          state++
        </Button>
        <div className="mt-2 mb-2">count: {count}</div>
        <div className="mt-2 mb-2">ref: {myrefcount.current}</div>
        <Button onClick={getRef}>使用ref</Button>
        <Button onClick={setRef}>ref++</Button>
      </div>
    </>
  );
};

export default StateAndRef;
